<template>
    <div>
        <!-- 顶部 -->
        <div class="top">
            <h3 style="text-align: center">异常记录</h3>
            <!-- 内容区域 -->
            <history-data :historyData="historyData"></history-data>
        </div>

        <!-- 底部 -->
        <div class="bottom">
            <div class="left">
                <h3>维修文档指引</h3>
                <h4 v-if="richTextList.length === 0" style="text-align: center; color: red">暂无维修文档内容</h4>
                <ul v-for="(richText, richTextIndex) in richTextList" :key="richTextIndex">
                    <li class="document-content" v-html="richText.repairGuidance"></li>
                </ul>
            </div>
            <div class="right">
                <h3>记录维修内容</h3>

                <div class="recordBox">
                    <!-- 记录维修方式大盒子 -->
                    <div class="repairTypeBox">
                        <div class="repairType">
                            维修方式：
                            <el-select
                                style="width: 250px"
                                :clearable="true"
                                v-model="repairTypeValue"
                                placeholder="请选择维修方式"
                                @change="selectRepairType"
                            >
                                <el-option v-for="item in repairTypeList" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                        </div>
                        <!-- SN盒子 -->
                        <div
                            class="SnBox"
                            v-if="
                                repairTypeValue != '换风扇' && repairTypeValue != '组装问题' && repairTypeValue != '其他' && repairTypeValue
                            "
                        >
                            <div class="oldSn">旧SN：<el-input style="width: 250px" v-model="oldSn"></el-input></div>
                            <div class="newSn">新SN：<el-input style="width: 250px" v-model="newSn"></el-input></div>
                            <el-button style="margin-left: 20px" type="success" @click="save">保存</el-button>
                        </div>
                        <!-- 风扇位置 -->
                        <div class="positionBox" v-if="repairTypeValue === '换风扇'">
                            风扇位置：
                            <el-checkbox
                                style="margin-right: 10px"
                                :indeterminate="isIndeterminate"
                                v-model="checkAll"
                                @change="handleCheckAllChange"
                                >全选</el-checkbox
                            >
                            <el-checkbox-group v-model="checkedPisition" @change="handleCheckedCitiesChange">
                                <el-checkbox v-for="item in fanPositionList" :label="item" :key="item">{{ item }}</el-checkbox>
                            </el-checkbox-group>
                            <el-button style="margin-left: 20px" type="success" @click="save">保存</el-button>
                        </div>

                        <!-- 组装问题或者其他问题 -->
                        <div class="otherProblemSave" v-if="repairTypeValue === '组装问题' || repairTypeValue === '其他'">
                            <el-button style="margin-left: 20px" type="success" @click="save">保存</el-button>
                        </div>
                    </div>

                    <!-- 维修方式具体内容 -->
                    <div class="repairRecordBox">
                        <ul v-for="(typeItem, typeItemIndex) in tableDataList" :key="typeItemIndex">
                            <li class="repair" :class="tableDataList.length > 1 ? 'borderBottom' : ''">
                                <!-- <p style="font-weight: bold">{{ typeItem.type }}</p> -->
                                <div class="content-button-box">
                                    <p style="font-weight: bold">{{ typeItem.repairType }}</p>
                                    <div class="contentBox">
                                        <!-- 新旧SN码 -->
                                        <div v-if="typeItem.initialSn">
                                            旧sn:
                                            <span style="color: #20a0ff">{{ typeItem.initialSn }}</span>
                                        </div>
                                        <div v-if="typeItem.newSn">
                                            新sn:
                                            <span style="color: #20a0ff">{{ typeItem.newSn }}</span>
                                        </div>

                                        <!-- 风扇位置 -->
                                        <div class="fanPositionBox" v-if="typeItem.fanPosition">
                                            风扇位置：
                                            <p v-for="(position, positionIndex) in typeItem.fanPosition" :key="positionIndex">
                                                <span style="color: #20a0ff; padding: 0 4px">{{ position }}</span>
                                            </p>
                                        </div>
                                    </div>
                                    <!-- 删除按钮 -->
                                    <el-button
                                        size="mini"
                                        class="iconButton"
                                        type="danger"
                                        icon="el-icon-delete"
                                        @click="handleDelete(typeItemIndex)"
                                    ></el-button>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <!-- 备注内容 -->
                    <div>
                        <p style="margin: 10px 0">备注：</p>
                        <textarea v-model="remarks" style="width: 100%; height: 80px" v-text="saveData.remarks"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="buttonWrao">
            <div class="buttonBox">
                <el-button type="success" size="medium" @click="goBack">返回上一页</el-button>
                <el-button type="primary" size="medium" @click="repairOver">维修完毕</el-button>
            </div>
        </div>
    </div>
</template>

<script>
var that;
import HistoryData from './HistoryData/HistoryData';
import getErrorRepair from '../../api/getErrorRepair';
import saveRepair from '../../api/saveRepair';
import store from '../../store/index';
import { Toast, Dialog } from 'vant';
export default {
    components: {
        HistoryData
    },
    data() {
        return {
            richTextList: [], //富文本

            historyData: '', //老化历史记录

            errorCode: [], //错误码

            // 维修方式列表
            repairTypeList: ['换主控板', '换算力版', '换电源', '换风扇', '组装问题', '其他'],
            repairTypeValue: '', //维修方式

            // 风扇位置列表
            fanPositionList: ['0', '1', '2', '3'],

            checkedPisition: [], //勾选的列表
            checkAll: false, //是否全选
            isIndeterminate: true,

            oldSn: '', //老的sn
            newSn: '', //更换之后的新sn

            // 记录维修方式列表
            tableDataList: [],

            // 维修方式对象
            repairTypeObj: {},

            // 备注
            remarks: '',

            // 保存维修方式数据对象
            saveData: {}
        };
    },
    created() {
        that = this;
        this.getHistoryData(); // 页面加载获取老化历史记录

        this.getDocument(); // 获取维修指引文档内容
    },
    methods: {
        // 获取老化历史记录
        getHistoryData() {
            let historyData = JSON.parse(this.$route.query.historyData);
            this.historyData = historyData;
            console.log(this.historyData);

            this.saveData = Object.assign(this.saveData, {
                // 设置保存维修方式请求参数
                mainBoardSn: this.historyData.serialNumber,
                historyRowId: this.historyData.rowId,
                createBy: store.state.userName
            });
        },

        // 获取维修指引文档内容
        getDocument() {
            this.getErrorCode(); // 获取算力版errorCode
            Toast.loading({
                duration: 0,
                forbidClick: true,
                message: '加载中...'
            });
            if (this.errorCode.length > 0) {
                getErrorRepair({ errorCodes: this.errorCode.join() })
                    .then((res) => {
                        console.log(res)
                        Toast.clear();
                        if (res.data.data) {
                            that.richTextList = res.data.data;
                        }
                    })
                    .catch(() => {
                        Toast.clear();
                    });
            }
        },
        // 获取算力版errorCode
        getErrorCode() {
            if (this.historyData.error != '0x0') {
                this.errorCode.push('0x' + this.historyData.error);
            } else {
                this.historyData.boardList.forEach((element) => {
                    if (element.errorNum != '0' && element.errorNum != '4000') {
                        that.errorCode.push('0x' + element.errorNum);
                        console.log(that.errorCode);
                    }
                });
            }
        },

        // 选择维修方式事件
        selectRepairType(e) {
            console.log(e);
        },

        // 全选事件
        handleCheckAllChange(val) {
            this.checkedPisition = val ? this.fanPositionList : [];
            this.isIndeterminate = false;
        },

        // 手动勾选风扇位置事件
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.fanPositionList.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.fanPositionList.length;
        },

        // 点击保存维修方式事件
        save() {
            if (this.repairTypeValue === '换风扇') {
                this.repairTypeObj = Object.assign(this.repairTypeObj, {
                    repairType: that.repairTypeValue,
                    fanPosition: that.checkedPisition,
                    isRepairFan: 'Y'
                });

                if (this.repairTypeObj.fanPosition.length > 0) {
                    that.tableDataList.push(that.repairTypeObj);
                    // 保存之后清空原有的数据
                    that.repairTypeObj = {};
                    that.repairTypeValue = '';
                    that.checkedPisition = [];
                    that.checkAll = false;
                } else {
                    that.$message.error('请勾选风扇位置');
                }
            } else if (that.repairTypeValue === '组装问题' || that.repairTypeValue === '其他') {
                that.saveData = Object.assign(that.saveData, { remarks: that.remarks });

                if (!that.saveData.remarks) {
                    Toast('请输入备注内容');
                } else {
                    that.repairTypeObj = Object.assign(that.repairTypeObj, {
                        repairType: that.repairTypeValue,
                        isRepairFan: 'N'
                    });
                    that.tableDataList.push(that.repairTypeObj);
                    that.repairTypeObj = {};
                    that.repairTypeValue = '';
                }
            } else {
                this.repairTypeObj = Object.assign(this.repairTypeObj, {
                    repairType: that.repairTypeValue,
                    initialSn: that.oldSn,
                    newSn: that.newSn,
                    isRepairFan: 'N'
                });

                if (!this.repairTypeObj.initialSn || !this.repairTypeObj.newSn) {
                    that.$message.error('请对应输入SN码');
                } else {
                    that.tableDataList.push(that.repairTypeObj);
                    // 保存之后清空原有的数据
                    that.repairTypeObj = {};
                    that.repairTypeValue = '';
                    that.oldSn = '';
                    that.newSn = '';
                }
            }
        },

        // 手动删除事件
        handleDelete(index) {
            this.tableDataList.splice(index, 1);
            // Dialog.confirm({
            //     title: '提示',
            //     message: '是否确认删除?'
            // })
            //     .then(() => {
            //         this.tableDataList.splice(index, 1);
            //         console.log(this.tableDataList);
            //         Toast.success('删除成功');
            //     })
            //     .catch(() => {});
        },

        // 点击维修完毕事件
        repairOver() {
            this.saveData = Object.assign(this.saveData, {
                repairTypeList: this.tableDataList
            });
            if (this.saveData.repairTypeList.length > 0) {
                if (that.repairTypeValue === '组装问题' || that.repairTypeValue === '其他') {
                    if (!that.saveData.remarks) {
                        Toast('请填写备注');
                    } else {
                        saveRepair(that.saveData).then((res) => {
                            console.log(res);
                            if (res.data.code === 0) {
                                this.$router.replace('/');
                            } else {
                                Toast.fail('维修记录失败，请检查网络是否正常');
                            }
                        });
                    }
                } else {
                    saveRepair(this.saveData).then((res) => {
                        console.log(res);
                        if (res.data.code === 0) {
                            this.$router.replace('/');
                        } else {
                            Toast.fail('维修记录失败，请检查网络是否正常');
                        }
                    });
                }
            } else {
                Toast('请填写维修内容');
            }
        },

        // 返回上一页
        goBack() {
            this.$router.go(-1);
        }
    },
    destroyed() {}
};
</script>

<style lang="less" scoped>
// 顶部
.top {
    padding: 5px;
    background-color: #fff;
    .display {
        display: flex;
        align-items: center;
    }
    .name {
        font-weight: bold;
    }
}

//底部
.bottom {
    display: flex;
    margin-top: 5px;
    .left,
    .right {
        width: 50%;
        padding: 5px;
        margin-right: 5px;
        background-color: #fff;
        // .document-content,
        .recordBox {
            margin-top: 8px;
            .repairTypeBox {
                margin-top: 8px;
                padding: 10px;
                background-color: #f2f2f2;
                // SN盒子
                .SnBox {
                    display: flex;
                    align-items: center;
                    margin-top: 8px;
                    .oldSn,
                    .newSn {
                        display: flex;
                        align-items: center;
                    }
                    .newSn {
                        margin-left: 10px;
                    }
                }
                // 风扇位置盒子
                .positionBox {
                    display: flex;
                    align-items: center;
                    margin-top: 10px;
                }

                .otherProblemSave {
                    display: flex;
                    flex-direction: row-reverse;
                }
            }

            // 维修方式记录
            .repairRecordBox {
                .borderBottom {
                    border-bottom: 2px solid #f2f2f2;
                }
                .repair {
                    display: flex;
                    align-items: center;
                    margin-top: 8px;
                    padding: 5px;
                    .content-button-box {
                        display: flex;
                        align-items: center;
                        .contentBox {
                            margin-left: 10px;
                            .fanPositionBox {
                                display: flex;
                                align-items: center;
                            }
                        }
                    }

                    .iconButton {
                        margin-left: 20px;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}

.buttonWrao {
    position: relative;
    margin-top: 40px;
    .buttonBox {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
    }
}
</style>